<template>
  <div>
    <div v-for="(item,i) in 3" :key="i" class="bee-line">
      <div v-for="(itemj,j) in (isEven(i)? 10:11) " class="bee-node">
        {{j}}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

// 判断数字是不是偶数
function isEven(num: number) {
  return num % 2 === 0;
}
</script>


<style scoped lang="scss">
html {
  overflow: hidden;
}

$n: 10;
$size: calc(100vw / $n);

.bee-line {
  display: flex;
  margin-top: -3vh;
  &:nth-child(even) {
    transform: translateX(calc($size/2 * -1));
  }


  .bee-node {
    flex-shrink: 0;
    background-color: black;
    height: $size;
    width: $size;
    clip-path: polygon(50% 5%, 95% 25%, 95% 75%, 50% 95%, 5% 75%, 5% 25%);
  }
}
</style>
